<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setTimeout</title>
</head>
<body>

question: <input type="text" id="question"/>
<div>
    answer: <span id="answer"></span>
</div>

</body>
<script>

    /**
     *   异步 --- 跳步执行---节约时间 ？！ 阻塞 --- 用户体验不好 ，无阻塞---提升用户体验
     *      step1    --- 1s
     *      step2    ----15s --- 异步
     *      step3    ----3s
     *     同步
     * */

    var question = document.getElementById('question');
    question.onkeyup = function () {
        getAnswer(this.value,function (answer){
            var answerSpan = document.getElementById('answer');
            answerSpan.innerText ='the answer is ' + answer ;
        }); // 先运行,允许后续步骤执行

        setWaiting();
    }

    function setWaiting() {
        var answerSpan = document.getElementById('answer');
        answerSpan.innerText = 'waiting.....';
    }

    function getAnswer(question,success) {

        var answer = '||| the answer for ' + question;

        setTimeout(function () {
            /*var answerSpan = document.getElementById('answer');
            answerSpan.innerText = answer;*/

            success(answer);
        }, 1000)

    }


</script>

</html>